import { PureComponent } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { actionCreator } from '../store';

class List extends PureComponent {
    render() {
        let { list, getMoreList, page } = this.props;
        return (
            <div className="list">
                <ul>
                    {list.map(item => {
                        return (
                            <li className="item" key={item.id}>
                                <Link to={'/detail/' + item.id} className="flex">
                                    <div className="content flex_item">
                                        <h3 className="title">{item.title}</h3>
                                        <p className="abstract ellipsis_2">{item.abstract}</p>
                                        <div className="meta">
                                            <span className="jsd">
                                                <i className="iconfont icon-diamond"></i>
                                                {item.diamond}
                                            </span>
                                            {item.cost && (
                                                <span className="cost">
                                                    <i className="iconfont icon-cost"></i>付费
                                                </span>
                                            )}
                                            <span className="nickname">{item.nickname}</span>
                                            <span className="message">
                                                <i className="iconfont icon-message"></i>
                                                {item.message}
                                            </span>
                                            <span className="like">
                                                <i className="iconfont icon-like"></i>
                                                {item.like}
                                            </span>
                                            {Boolean(item.shang) && (
                                                <span className="shang">
                                                    <i className="iconfont icon-shang"></i>
                                                    {item.shang}
                                                </span>
                                            )}
                                        </div>
                                    </div>
                                    {item.imgUrl && <img className="img" src={item.imgUrl} alt="" />}
                                </Link>
                            </li>
                        );
                    })}
                </ul>
                <div className="more" onClick={() => getMoreList(page)}>
                    阅读更多
                </div>
            </div>
        );
    }
}

const mapStateToProps = state => {
    return {
        list: state.getIn(['home', 'list']),
        page: state.getIn(['home', 'page']),
    };
};

const mapDispatchToProps = disptch => {
    return {
        getMoreList(page) {
            disptch(actionCreator.getMoreListAction(page));
        },
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(List);
